<!-- 全屏播放器 -->
<template>
  <div class="normal-player-container">
    <!-- 背景 -->
    <div class="background">
      <img :src="currentSong.al.picUrl+'?param=500y500'" width="100%" height="100%" alt="" />
    </div>
    <!-- 蒙层 -->
    <div class="background layer"></div>
    <!-- 头部 -->
    <div class="top" @click="enterFullScreenAction">
      <div class="back">
        <i class="iconfont icon-xiala"></i>
      </div>
      <h1 class="title">{{ currentSong.name }}</h1>
      <h2 class="subtitle">{{ currentSong.ar }}</h2>
    </div>

    <!-- 中间的唱片 -->
    <div class="middle" :class="{ animationPaly: playing,animationStop: !playing, }">
      <div class="CD-wrapper">
        <img class="image" :class="{pause: !playing}" :src="currentSong.al.picUrl+'?param=500y500'" alt="" />
      </div>
    </div>
    <!-- 底部操作按键 -->
    <div class="bottom">
      <!-- 播放音乐滑块组件 -->
      <bar-progress :progress="progress" @input="changeProgressAction" @dragStart="changeProgress('start')" @dragEnd="changeProgress('end')" :currentTime="currentTime" :duration="duration" />
      <OperatorsIcon @popupBottom="popupBottom"></OperatorsIcon>

    </div>
  </div>
</template>

<script  type='module'>
import BarProgress from './components/bar-progress'// 播放音乐滑块组件
import OperatorsIcon from './components/OperatorsIcon'// 播放音乐滑块组件
import { mapGetters, mapState } from 'vuex'

export default {
  components: {
    BarProgress, // 播放音乐滑块组件
    OperatorsIcon
  },
  props: {
    currentTime: Number,
    duration: Number,
    // 获取进度
    progress: Number
  },
  data () {
    return {
      // progress: 0.2,
    }
  },
  methods: {
    enterFullScreenAction () {
      // 退出全屏播放
      this.$store.commit({
        type: 'player/setFullScreen',
        value: false
      })
    },
    // 拖动控制音乐滑块
    changeProgressAction (newValue) {
      this.$emit('changeProgress', newValue)
    },
    // 开始或结束，拖动控制音乐滑块
    changeProgress (newValue) {
      this.$emit('changeProgressValue', newValue)
    },
    // 点击显示音乐播放列表
    popupBottom () {
      this.$emit('popupBottom', true)
    }
  },
  computed: {
    ...mapState({
      playing: (state) => state.player.playing,
      mode: (state) => state.player.mode
    }),
    ...mapGetters({
      currentSong: 'player/currentSong'
    })
  }
}
</script>

<style scoped lang="less">
.normal-player-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
  background: #eee;
}
.background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.6;
  filter: blur(20px);
  &.layer {
    background: #aaa;
    opacity: 0.3;
    filter: none;
  }
}
.top {
  position: relative;
  margin-bottom: 25px;
  .back {
    position: absolute;
    top: 0;
    left: 6px;
    .iconfont {
      display: block;
      padding: 9px;
      font-size: 24px;
      color: #333;
      font-weight: bold;
    }
  }
  .title {
    width: 70%;
    margin: 0 auto;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: #333;
  }
  .subtitle {
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    color: #666;
  }
}
.middle {
  position: absolute;
  margin: auto;
  top: 120px;
  left: 0;
  right: 0;
  width: 70%;
  height: 70vw;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  border: 25px solid #000;
  box-sizing: border-box;
  animation: animationPaly 15s linear infinite;
  .CD-wrapper {
    width: 100%;
    height: 100%;
    .image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100;
      animation: rotate 20s linear infinite;
      &.pause {
        animation-play-state: paused;
      }
    }
  }
}
.animationPaly {
  // animation-fill-mode: forwards;
  animation-play-state: running;
}
.animationStop {
  animation-play-state: paused;
  // animation-fill-mode:forwards;
}
@keyframes animationPaly {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
.bottom {
  position: absolute;
  left: 0;
  bottom: 50px;
  width: 100%;
}
</style>
